<template>
  <div class="bottom">
    <navigation :items="navItems" :selectedItem="selectedItem" @item-selected="handleItemSelected"/>
  </div>
</template>

<script>


import Navigation from "@/components/content/navigation/Navigation.vue";

export default {
  name: 'navigationBottom',
  components: {
    Navigation,
  },
  data() {
    return {
      navItems: [
        {
          label: '首页',
          path:'/index',
          image_activate: require('@/assets/icon/navigation/deactivate/index.png'),
          image: require('@/assets/icon/navigation/activate/index.png')
        },
        {
          label: '热点',
          path:'/index',
          image_activate: require('@/assets/icon/navigation/deactivate/hot.png'),
          image: require('@/assets/icon/navigation/activate/hot.png')
        },
        {
          label: '发现',
          path:'/discover',
          image_activate: require('@/assets/icon/navigation/deactivate/discover.png'),
          image: require('@/assets/icon/navigation/activate/discover.png')
        },
        {
          label: '会员',
          path:'/vip',
          image_activate: require('@/assets/icon/navigation/deactivate/vip.png'),
          image: require('@/assets/icon/navigation/activate/vip.png')
        },
        {
          label: '我的',
          path:'/profile',
          image_activate: require('@/assets/icon/navigation/deactivate/profile.png'),
          image: require('@/assets/icon/navigation/activate/profile.png')
        },
      ],
      selectedItem: 0,

    };
  },
  mounted() {
    let path = this.$route.path
    switch (path) {
      case '/index':
        this.selectedItem = 0
            break
      case '/discover':
        this.selectedItem = 2
            break
      case '/profile':
        this.selectedItem =4
        break
      case '/vip':
        this.selectedItem =3
        break
    }
  },
  methods: {
    handleItemSelected(index) {
      if(index!=this.selectedItem){
        this.selectedItem = index;
        this.$router.push(this.navItems[index].path)
      }
    },
  },
};
</script>

<style scoped lang="scss">
.bottom{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10000;
  left: 0;
}
</style>

